<template>
  <view>
    <!-- 搜索框 -->
    <van-search
      shape="square"
      background="#ff2d4a"
      placeholder="请输入搜索关键词"
    />
    <!-- 左侧的导航部分 -->
    <van-tree-select
      :items="leftNavList"
      height="calc(100vh - 54px)"
      :main-active-index="mainActiveIndex"
      @click-nav="clickNav"
    >
      <!-- 右侧的内容 -->
      <scroll-view
        scroll-y
        class="scrollView"
        :scroll-top="scrollTop"
        slot="content"
      >
        <!-- 第一层循环 -->
        <view
          class="category_group"
          v-for="(item, index) in rightContent"
          :key="index"
        >
          <!-- 小标题 -->
          <view class="cate_name">{{ item.cat_name }}</view>
          <!-- 小商品内容 -->
          <view class="cate_list">
            <navigator
              :url="'/pages/goods_list/goods_list?id=' + item2.cat_id"
              class="cate_item"
              v-for="(item2, index2) in item.children"
              :key="index2"
            >
              <!-- 商品图片 -->
              <image mode="widthFix" :src="item2.cat_icon" />
              <!-- 商品名称 -->
              <view>{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </van-tree-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 左边的导航部分
      leftNavList: [],
      mainActiveIndex: 0,
      // 记录获取的数据
      categoryList: [],
      // 右边内容的数据
      rightContent: [],
      // 这个是每次点击都置顶
      scrollTop: 0,
    };
  },
  async onLoad() {
    // 获取缓存的数据
    const data = wx.getStorageSync("timeOrlist");
    //判断缓存是否存在
    //如果缓存里面没有数据或者时间超时了就重新获取数据设置缓存
    if (!data || Date.now() - data.time > 60 * 1000) {
      this.getCategory();
    } else {
      uni.showLoading({
				title:"加载中"
			});
      //否则的话就直接用缓存里面的数据
      this.categoryList = data.list;
      //存储数据
      this.leftNavList = this.categoryList.map((item) => ({
        text: item.cat_name,
      }));
      this.rightContent = this.categoryList[0].children;
      uni.hideLoading();
    }
  },
  methods: {
    //初始化数据
    async getCategory() {
      this.categoryList = await this.get({ url: "/categories" });
      console.log(this.categoryList);
      //存储数据
      uni.setStorageSync("timeOrlist", {
        time: Date.now(),
        list: this.categoryList,
      });
      this.leftNavList = this.categoryList.map((item) => ({
        text: item.cat_name,
      }));
      this.rightContent = this.categoryList[0].children;
    },
    //左侧导航的点击事件
    clickNav(e) {
      const index = e.detail.index || 0;
      this.rightContent = this.categoryList[index].children;
      this.scrollTop = Math.random();
    },
  },
};
</script>

<style lang="less" scoped>
.category_group {
  .cate_name {
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cate_list {
    display: flex;
    flex-wrap: wrap;
    .cate_item {
      width: 33.33%;
      text-align: center;
      image {
        width: 80%;
        margin: 0 auto;
      }
    }
  }
}
.scrollView {
  height: 100%;
}
</style>
